<template>
<div class="article-meta">
    <nuxt-link :to="{ 
        name: 'profile',
        params: {
            username: article.author.username
        }
    }"><img :src="article.author.image" /></nuxt-link>
    <div class="info">
    <nuxt-link :to="{
        name: 'profile',
        params: {
            username: article.author.username
        }
    }" class="author">{{ article.author.username }}</nuxt-link>
    <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
    </div>
    <template v-if="isCurrentUser">
        <!-- 前往编辑 -->
        <nuxt-link 
            class="btn btn-outline-secondary btn-sm" 
            :to="{
                name: 'editorUpdate',
                params: {
                    slug: article.slug
                }
            }">
            <i class="ion-edit"></i> Edit Article
        </nuxt-link>
        <button 
            class="btn btn-outline-danger btn-sm"
            :disabled="article.isDeleting"
            @click="onDelete(article)"
        >
            <i class="ion-trash-a"></i> Delete Article
        </button>
    </template>
    <template v-if="!isCurrentUser">
        <!-- 关注作者 -->
        <button class="btn btn-sm btn-outline-secondary"
            :class="{ active: article.author.following }"
            @click="onFollow(article)"
            :disabled="article.followDisable"
        >
            <i class="ion-plus-round"></i>
            &nbsp;
            {{ article.author.following ? 'Unfollow' : 'Follow'}} {{article.author.username}}
        </button>
        &nbsp;&nbsp;
        <!-- 文章点赞 -->
        <button class="btn btn-sm btn-outline-primary"
            :class="{ active: article.favorited }"
            :disabled="article.favoriteDisable"
            @click="onFavorite(article)"
        >
            <i class="ion-heart"></i>
            &nbsp;
            {{ article.favorited ? 'Unfavorite' : 'Favorite' }} Article <span class="counter">({{article.favoritesCount}})</span>
        </button>
    </template>
</div>
</template>

<script>
import { mapState } from 'vuex'

import { addFavorite, deleteFavorite, deleteArticle } from '@/api/article'
import { addFollow, deleteFollow } from '@/api/user'

export default {
    name: 'ArticleMeta',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    computed: {
        // 判断这篇文章是否属于当前登录的用户
        ...mapState(['user']),
        isCurrentUser() {
            if (this.user) {
                return this.user.username === this.article.author.username
            }
            return false
        },
        isLogin() {
            return !!this.user
        }
    },
    methods: {
        async onFavorite(article) {
            if (!this.isLogin) {
                this.$router.push({name:'login'})
                return
            }
            article.favoriteDisable = true
            if (article.favorited) {
                // 取消点赞
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
            } else {
                // 添加点赞
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
            }
            article.favoriteDisable = false
        },
        async onFollow(article) {
            if (!this.isLogin) {
                this.$router.push({name:'login'})
                return
            }
            const { author } = article
            const { username } = author
            author.followDisable = true
            if (author.following) {
                // 取消关注
                await deleteFollow(username)
                author.following = false
            } else {
                // 添加关注
                await addFollow(username)
                author.following = true
            }
            author.followDisable = false
        },
        async onDelete() {
            this.article.isDeleting = true
            try {
                await deleteArticle(this.article.slug)
                // 删除后跳转
                this.$router.push({
                    name: 'profile',
                    params: {
                        username: this.user.username
                    }
                })
            } catch(error) {
                alert(error)
            }
            this.article.isDeleting = false
        }
    }
}
</script>

<style>

</style>